<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<view class="headTop">
			<view class="flex align-center padding-lr ">
				<view class="u-m-r-10">
					<image :src="avatar" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;"
						@click="goNav('/pages/my/userinfo')"></image>
				</view>
				<view class="u-flex-1 u-m-l-10 text-white " v-if="!isLogin">
					<view class="margin-left-sm">{{userName}}</view>
					<view class="flex " style="font-size: 22rpx;font-weight: 500;">
						<view v-if="geRen == 0" class="round  u-font-12"
							@click.stop="goNav('/my/renzheng/index?classify='+classify)"
							style="display: inline-block;background-color: #F2F2F2; color: #666666;padding: 2upx 16upx;font-weight: 400;">
							未入驻
						</view>
						<view v-else-if="geRen == 1" class="round  u-font-12"
							@click.stop="goNav('/my/renzheng/index?classify='+classify)"
							style="display: inline-block;background-color: #F2F2F2; color: #666666;padding: 2upx 16upx;font-weight: 400;">
							审核中
						</view>
						<view v-else-if="geRen == 2" class="round  u-font-12"
							style="display: inline-block;background-color: #F2F2F2; color: #666666;padding: 2upx 16upx;font-weight: 400;">
							已入驻
						</view>
						<view v-else-if="geRen == 3" class="round  u-font-12"
							@click.stop="goNav('/my/renzheng/index?classify='+classify)"
							style="display: inline-block;background-color: #F2F2F2; color: #666666;padding: 2upx 16upx;font-weight: 400;">
							已拒绝
						</view>
					</view>
				</view>
				<view v-else class="text-xl u-p-l-20 text-bold" @click="goLogin('/pages/public/login')">
					登录
				</view>
			</view>
			<!-- <view class="flex align-center padding-left">
				<image src="../../static/images/data.png" style="width: 26upx;height: 26upx;"></image>
				<view class="margin-left-xs flex align-center" style="color: #999999;">
					<view @click="bindData(1)">{{startTime?startTime:'开始时间'}}</view>
					至
					<view @click="bindData(2)">{{endTime?endTime:'结束时间'}}</view>
				</view>
			</view> -->
			<view class="padding-bottom">
				<me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view style="margin-top: 120px;" v-if="!isLogin">
		<!-- #endif -->
			<!-- #ifdef H5 -->
			<view style="margin-top: 140px;" v-if="!isLogin">
			<!-- #endif -->
				<!-- #ifdef APP -->
				<view style="margin-top:170px;" v-if="!isLogin">
				<!-- #endif -->
					<!-- 数据列表 -->
					<view class="margin-lr-sm margin-top-16 padding-sm bg radius" v-for="(item,index) in goods"
						:key='index' @click="bindtakeDetail(item.ordersId)" style="position: relative;">
						<view class="flex justify-between">
							<view class="text-blue flex align-center">
								<image v-if="item.isTransfer==1"
									style="width: 40rpx;height: 40rpx;border-radius: 8rpx;margin-right: 20rpx;"
									src="../../static/images/icon/zhuan.png" mode=""></image>
								<image v-else-if="item.isTransfer==2"
									style="width: 40rpx;height: 40rpx;border-radius: 8rpx;margin-right: 20rpx;"
									src="../../static/images/icon/pai.png" mode=""></image>
								<image v-else
									style="width: 40rpx;height: 40rpx;border-radius: 8rpx;margin-right: 20rpx;"
									src="../../static/images/icon/jie.png" mode=""></image>
								{{item.statusName}}
							</view>
							<view class="text-white">{{item.updateTime}}</view>
						</view>
						<view class="u-p-t-30">
							<view class="text-30  text-bold u-line-1" style="width: 500rpx;">{{item.myLevel}}</view>
							<view class="text-lg text-bold">
								{{item.appointInformation.serviceName}}{{item.appointInformation.hospitalName}}订单
							</view>
							<view class="margin-top-xs" style="font-size: 24upx;"><text
									style="color: #999999;">地址：</text>{{item.appointInformation.hospitalName}}</view>
							<view class="margin-top-xs" style="font-size: 24upx;"><text
									style="color: #999999;">时间：</text>
								<text style="font-size: 26rpx;font-weight: bold;">
									{{item.appointInformation.hopeTime}}
								</text>
							</view>
							<view class="margin-tb-sm" style="width: 100%;height: 1rpx;background: #F2F2F2;"></view>
							<view class="flex align-center justify-between">
								<view class=" text-30 text-bold" style="color: #468EF8;">
									￥{{item.payMoney}}
								</view>
								<!-- <view class="text-sm boxbtn">{{item.isTransfer==1?'转单':(item.isTransfer==2?'派单':'接单')}}
								</view> -->
							</view>




						</view>

						<view class="biao" v-if="item.shopId">商</view>

						<!-- <view class="margin-top-sm" v-if="item.remarks">
							备注：<text class="text-red">{{item.remarks}}</text>
						</view> -->
						<view class="flex justify-end u-p-t-20">
							<u-button v-if="item.state == 5 && isShowCloseBtn" :custom-style="customStyle"
								shape="circle" :plain="true" @click.stop="cleanOrder(item,3)">取消接单</u-button>

							<u-button v-if="item.state == 5" :custom-style="customStyle1" shape="circle" :plain="false"
								@click="openOrder(item,index)">转单</u-button>
							<u-button v-if="item.state == 5" :custom-style="customStyle1" shape="circle" :plain="true"
								@click.stop="bindtakeDetail(item.ordersId)">开始服务</u-button>

							<u-button v-if="item.state == 1" :custom-style="customStyle1" shape="circle" :plain="false"
								@click.stop="bindtakeDetail(item.ordersId)">完成服务</u-button>
						</view>
					</view>
				</view>

				<empty v-if="isLogin"></empty>
				<empty v-if="goods.length == 0"></empty>
				<!-- 确认码弹框 -->
				<view class="boxtk" v-if="reverTrue">
					<view class="whitebox padding">
						<view class="flex justify-between align-center">
							<view style="font-size:38upx;color:#333333" class="text-bold">确认码</view>
							<view @click="bindclose(1)">
								<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
							</view>
						</view>
						<view style="margin-top:59upx;">
							<input placeholder="请输入确认码" name="input" maxlength="10" v-model="codeNum" type="number"
								style="background: #F2F2F2;height:100upx;padding:30upx"></input>
						</view>
						<view class="btn" @click="cancelOrder(goods[codeIndex],2)">确定</view>
					</view>
				</view>

				<!-- 转单弹框 -->
				<u-popup v-model="orderTrue" mode="center" width="80%" height="500" border-radius="24">
					<view class="flex justify-center align-center" style="width: 100%;height: 100%;">
						<view class="" style="width: 80%;height: 400rpx;">
							<view class="flex justify-between align-center">
								<view style="font-size:38upx;color:#333333" class="text-bold">转单人手机号码</view>
								<view @click="bindclose(2)">
									<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
								</view>
							</view>
							<view style="margin-top:59upx;">
								<input placeholder="请输入转单人手机号码" name="phone" maxlength="11" v-model="phone"
									type="number"
									style="background: #F2F2F2;height:100upx;padding-left: 30rpx;padding-right: 30rpx;"></input>
							</view>
							<view class="btn" @click="giveOrder(goods[orderIndex])">确定</view>
						</view>
					</view>

					<!-- <view class="boxtk">
						<view class="whitebox padding">
							<view class="flex justify-between align-center">
								<view style="font-size:38upx;color:#333333" class="text-bold">转单人手机号码</view>
								<view @click="bindclose(2)">
									<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
								</view>
							</view>
							<view style="margin-top:59upx;">
								<input placeholder="请输入转单人手机号码" name="phone" maxlength="11" v-model="phone"
									type="number" style="background: #F2F2F2;height:100upx;padding:30upx"></input>
							</view>
							<view class="btn" @click="giveOrder(goods[orderIndex])">确定</view>
						</view>
					</view> -->
				</u-popup>

				<!-- 开始时间 -->
				<u-picker v-model="startshow" mode="time" :params="paramsStart" @confirm="startData"></u-picker>
				<!-- 结束时间 -->
				<u-picker v-model="endshow" mode="time" :params="paramsEnd" @confirm="endData"></u-picker>
			</view>
</template>

<script>
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '../../components/empty.vue'
	export default {
		components: {
			meTabs,
			empty
		},
		data() {
			return {
				isShowCloseBtn: false, //是否显示取消接单按钮
				avatar: '../../static/logo.png',
				isLogin: true,
				userName: '匿名',
				geRen: 0,
				startshow: false,
				endshow: false,
				paramsStart: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnd: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				startTime: '',
				endTime: '',
				codeNum: '',
				codeIndex: 0,
				reverTrue: false,
				goods: [], // 数据列表
				tabs: [{
					title: '全部',
					status: ''
				}, {
					title: '待服务',
					status: '5'
				}, {
					title: '进行中',
					status: '1'
				}, {
					title: '已完成',
					status: '2'
				}, {
					title: '已取消',
					status: '3'
				}],
				tabIndex: 0, // tab下标
				game: [],
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#999999',
					border: '2rpx solid #999999',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#fff',
					// border: '2rpx solid #557EFD',
					backgroundColor: '#557EFD',
					// border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				count: '',
				orderTrue: false,
				phone: '',
				orderIndex: 0,
				arr: [],
				showModal: true,
			}
		},
		onLoad() {

			// this.getlist()
		},
		onShow() {
			this.isShowCloseBtn = uni.getStorageSync('isShowCloseBtn') ? uni.getStorageSync('isShowCloseBtn') : false
			this.userId = uni.getStorageSync('userId')
			this.geRen = uni.getStorageSync("geRen")
			this.nickName = uni.getStorageSync('nickName')
			if (this.userId) {
				uni.showLoading({
					title: '加载中...'
				})
				this.isLogin = false
				this.getUserInfo()
				this.page = 1
				this.tabIndex = 0
				this.getlist()
				// #ifdef MP-WEIXIN
				//订阅
				this.$Request.getT('/app/common/type/312').then(res => { //订单变更通知 312
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.arr.push(res.data.value)
						}
					}
				})

				this.$Request.getT('/app/common/type/352').then(res => { //绑定通知 352
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.arr.push(res.data.value)
						}
					}
				})




				if (this.showModal) {
					this.openMsg()
				}
				// #endif
			} else {
				this.isLogin = true
				this.userName = '匿名'
				this.avatar = '../../static/logo.png'
			}
		},
		methods: {
			// 开启订阅消息
			openMsg() {
				console.log('订阅消息')
				var that = this
				uni.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						console.log(ret.subscriptionsSetting, '------------------')
						// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendMsg', true)
							uni.openSetting({ // 打开设置页 
								success(rea) {
									console.log(rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							console.log(99999)
							uni.setStorageSync('sendMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										uni.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												console.log(JSON.stringify(re),
													'++++++++++++++')
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
													// uni.setStorageSync('sendMsg', true)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										// uni.setStorageSync('sendMsg', true)
										console.log('确认')
										that.showModal = false
									} else if (res.cancel) {
										console.log('取消')
										// uni.setStorageSync('sendMsg', false)
										that.showModal = true
									}
								}
							})
						}
					}
				})
			},
			//转单弹框
			openOrder(e, index) {
				this.phone = ''
				this.orderIndex = index;
				this.orderTrue = true
			},
			goLogin(e) {
				uni.navigateTo({
					url: e
				})
			},
			//开始时间
			startData(e) {
				// console.log(e)
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			// 结束时间
			endData(e) {
				this.endTime = e.year + '-' + e.month + '-' + e.day
				// console.log(this.endTime)
				this.getFb()
			},
			//关闭弹框  1 确认码  2 转单弹框
			bindclose(index) {
				if (index == 1) {
					this.reverTrue = false
				} else if (index == 2) {
					this.orderTrue = false
				}
			},
			//确认码弹框
			Ordersure(index) {
				this.codeNum = ''
				this.codeIndex = index;
				this.reverTrue = true
			},
			// 接单详情
			bindtakeDetail(e) {
				let that = this
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					uni.requestSubscribeMessage({
						tmplIds: that.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
				console.log(e)
				let id = e
				uni.navigateTo({
					url: '/my/order/pay?id=' + id
				})
			},

			getlist() {
				let curTab = this.tabs[this.tabIndex].status

				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit,
					orderTakingId: this.userId
				}


				// selectMyTakeOrders
				this.$Request.get('/app/orders/selectMyTakeOrders', data).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						if (this.page == 1) this.goods = []

						let rate = uni.getStorageSync('rate')
						res.data.records.forEach(d => {
							if (d.appointInformation.tags) {
								d.appointInformation.tags = d.appointInformation.tags.split('|')
							}
							d.payMoney = parseFloat(parseFloat(d.payMoney) * parseFloat(d.rateProportion))
								.toFixed(2);
							if (d.state == '5') {
								d.statusName = '待服务'
							} else if (d.state == '1') {
								d.statusName = '进行中'
							} else if (d.state == '2') {
								d.statusName = '已完成'
							} else if (d.state == '3') {
								d.statusName = '已取消'
							}
							this.goods.push(d);
							console.log(this.goods)
						});
						this.count = res.data.total
					}

					uni.stopPullDownRefresh();
				})
			},
			// 切换菜单
			tabChange() {
				this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getlist()
			},
			//转单
			giveOrder(e) {
				let that = this
				if (!that.phone) {
					uni.showToast({
						title: '请输入转单人手机号码',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定转单吗？',
					success: function(res) {
						if (res.confirm) {
							that.orderTrue = false
							let data = {
								ordersId: e.ordersId,
								phone: that.phone,
							}
							that.$Request.post('/app/orders/giveOrdersUser', data).then(ret => {
								if (ret.code == 0) {
									that.phone = ""
									that.page = 1
									that.getlist()
									uni.showToast({
										title: '转单成功',
										icon: 'none'
									})
								} else {
									that.$queue.showToast(ret.msg);
								}
							})
						}
					},
				})

			},
			// 取消订单
			cleanOrder(e, status) {
				let that = this
				let data = {
					id: e.ordersId,
					status
				}
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							if (e.ordersType == 1) { //ordersType:1陪诊订单 2：陪护订单
								that.$Request.getT('/app/orders/rideCancelOrder', {
									orderId: e.ordersId
								}).then(res => {
									if (res.code == 0) {
										that.reverTrue = false
										that.page = 1
										that.getlist()
										uni.showToast({
											title: '订单已取消',
											icon: 'none'
										})
									} else {

										that.$queue.showToast(res.msg);
									}
								})
							} else {
								that.$Request.get('/app/orders/cancelOrder', data).then(res => {
									if (res.code == 0) {
										that.reverTrue = false
										that.page = 1
										that.getlist()
										uni.showToast({
											title: '订单已取消',
											icon: 'none'
										})
									} else {

										that.$queue.showToast(res.msg);
									}
								})
							}

						}
					},
				})
			},
			// 完成订单
			cancelOrder(e, status) {
				let that = this
				let content = ''
				if (status == 3) {
					content = '确定拒绝接单吗？'
				} else if (status == 2) {
					if (that.codeNum.length < 3) {
						uni.showToast({
							title: '请填写收货码（不少于四位数）',
							duration: 1000,
							icon: 'none'
						});
						return
					}
					content = '确定订单已经完成吗？如果未完成，客户投诉将采取封号处理'
				} else if (status == 1) {
					content = '确定开始服务当前订单吗？'
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							let data
							if (status == 2) {
								data = {
									id: e.ordersId,
									code: that.codeNum,
									status
								}
							} else {
								data = {
									id: e.ordersId,
									status
								}
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {
									that.reverTrue = false
									that.page = 1
									that.getlist()
									uni.showToast({
										title: '订单已完成',
										icon: 'none'
									})
								} else {

									that.$queue.showToast(res.msg);
								}
							})
						}
					},
				})

			},
			//
			clickItem: function(options) {
				let data = {
					userId: this.userId,
					focusedUserId: options.ordersUserId
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						let id = this.userId == res.data.userId ? res.data.focusedUserId : this.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id
						})
					}
				})
			},
			goNav(e) {
				if (uni.getStorageSync('userId')) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}

			},
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.userName = res.data.userName
						this.invitationCode = res.data.invitationCode
						this.avatar = res.data.avatar ? res.data.avatar : '../../static/logo.png'
						this.isAuthentication = res.data.isAuthentication
						this.isCashDeposit = res.data.isCashDeposit
						uni.setStorageSync('avatar', res.data.avatar)
						uni.setStorageSync('invitationCode', res.data.invitationCode)
						uni.setStorageSync('rate', res.data.rate)
						// uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
						// uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
					}
				});
			},
		},
		onReachBottom: function() {
			if (this.goods.length == this.count) {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			} else {
				this.page = this.page + 1;
				this.getlist()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	.boxtk {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.whiteboxs {
		// width: 461upx;
		// height: 563upx;
		text-align: -webkit-center;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 185px;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.whitebox {
		width: 550upx;
		height: 440upx;
		background: #FFFFFF;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 450upx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.btn {
		// width: 400upx;
		height: 88upx;
		background: #557EFD;
		// box-shadow: 0upx 10upx 20upx 0upx #FFD9B3;
		border-radius: 16upx;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		line-height: 88upx;
		margin-top: 43upx;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: flex-end;
		height: 127rpx;
	}

	.headTop {
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		/* #ifdef H5 */
		padding-top: 30upx;
		/* #endif */
		/* #ifdef APP */
		padding-top: 120upx;
		/* #endif */
	}

	.biao {
		position: absolute;
		right: 30rpx;
		top: 100rpx;
		z-index: 99;
		width: 42rpx;
		height: 42rpx;
		background-color: #468EF8;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		border-radius: 10rpx;
		font-weight: 600;
	}
</style>